<template>
    <div class="status-container">
        <div class="status-box">
            <div class="status-text">运行</div>
            <div class="status-number">{{ running }}</div>
        </div>
        <div class="status-box">
            <div class="status-text">待机</div>
            <div class="status-number">{{ standby }}</div>
        </div>
        <div class="status-box">
            <div class="status-text">故障</div>
            <div class="status-number">{{ fault }}</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            running: 481,
            standby: 120,
            fault: 31,
        };
    },
};
</script>

<style scoped>
.status-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 150px;
}

.status-box {
    background: #3d6ecf;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px;
}

.status-text {
    font-size: 18px;
    color: #fff;
    margin-bottom: 10px;
}

.status-number {
    font-size: 32px;
    color: #0070ff;
}

.status-box:nth-child(1) .status-number {
    color: #20c997;
    /* Green for '运行' */
}

.status-box:nth-child(2) .status-number {
    color: #ffc107;
    /* Orange for '待机' */
}

.status-box:nth-child(3) .status-number {
    color: #f03e3e;
    /* Red for '故障' */
}
</style>